<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/masking.css">
</head>
<style>
    .first {
        width: 100%;
        height: 60px;
        border: 1px solid #F3F3F4;
        border-radius: 5px;
        line-height: 60px;
        background: #FFFFFF;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .first input, select {
        width: 120px;
        height: 20px;
        margin-right: 30px;
        border-radius: 5px;
        border: 1px solid #F3F3F4;
        background: #FFFFFF;
        outline: none;
    }

    .first button {
        width: 49px;
        height: 26px;
        border-radius: 20px;
        background: #E0ECFF;
        color: #1AB394;
    }

    border: none

    ;
    opacity:

    0.8
    ;
    }
    button:hover {
        opacity: 1;
    }

    .second {
        margin-top: 20px;
        width: 100%;
        height: 525px;
        background: #FFFFFF;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #F3F3F4;
    }

    .second .secondTop {
        width: 100%;
        height: 30px;
    }

    .second .secondTop .secondTopLeft {
        float: left;
        width: 300px;
        height: 100%;
    }

    .second .secondTop .secondTopRight {
        float: right;
        width: 300px;
        height: 100%;
    }

    .second .secondTop .secondTopLeft ul {
        margin-left: -37px;
        box-sizing: border-box;
    }

    .second .secondTop .secondTopLeft ul li {
        float: left;
        list-style: none;
    }

    .second .secondTop .secondTopLeft ul li button {
        margin-right: 10px;
        border-radius: 5px;
        border: none;
        opacity: 0.8;
        height: 26px;
    }

    .tt {
        width: 100%;
        height: 20px;
    }

    .second .secondMiddle {
        width: 100%;
        height: 300px;
    }

    .second .secondMiddle .mainTable {
        width: 100%;
    }

    .second .secondMiddle .mainTable thead tr {
        background: #EFF3F8;

    }

    .second .secondMiddle .mainTable thead tr th {
        border-bottom: 1px solid #CCCCCC;
    }

    .second .secondMiddle .mainTable td, th {
        border-bottom: 1px solid #F3F3F4;
        height: 40px;
        font-weight: normal;
        font-size: 13px;
        text-align: center;
    }
</style>
<body>
<div class="contain" id="contain">
    <div class="first">
        菜单名称: <input type="text" class="hh"/>
        <button onclick="findToLike()">搜索</button>
        <button onclick="reset()">重置</button>
    </div>
    <div class="second">
        <div class="secondTop">
            <div class="secondTopLeft">
                <ul>
                    <li>
                        <button style="background: #1C84C6" onclick="addFood()">新增</button>
                    </li>
                </ul>
            </div>

        </div>
        <div class="tt"></div>
        <div class="secondMiddle">
            <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <th>菜单编号</th>
                    <th>菜名</th>
                    <th>菜类</th>
                    <th>状态</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="food in foods">
                    <td>{{food.fid}}</td>
                    <td>{{food.fname}}</td>
                    <td>{{food.ftype}}</td>
                    <td>{{food.fstatus}}</td>
                    <td>{{food.fcount}}</td>
                    <td>
                        <a href="#" onclick="updateFood(this)">修改</a>
                        <a href="#" onclick="delFood(this)">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="tts">
    <form id="myform2" method="post">
        <table class="ttb">
            <tr>
                <td>
                    <div>
                        食物编号：<input type="text" name="fid" class="fid" readonly/>
                    </div>
                </td>
                <td>
                    <div>
                        食物名：<input type="text" name="fname" class="fname"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        食物类型：<input type="text" name="ftype" class="ftype"/>
                    </div>
                </td>
                <td>
                    <div>
                        食物状态：<input type="text" name="fstatus" class="fstatus"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        食物数量：<input type="text" name="fcount" class="fcount"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="提交" class="btn1"/>
                    <input type="button" value="修改" class="btn2"/>
                </td>
                <td><input type="button" value="取消" onclick="cancelData()"/></td>
                <td></td>
            </tr>
        </table>
    </form>
</div>
<div class="mask"></div>
</body>
<script src="js/JQuery2.1.4.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/cd.js"></script>
<script>
    $(".mainTable tbody>tr").mouseout(function () {
        $(this).css("background", "#FFFFFF")
    })
    $(".mainTable tbody>tr").mouseover(function () {
        $(this).css("background", "#EFF3F8")
    })
</script>
</html>